<template>
	<view class="content">
		<view class="tab_list">
			<text v-for="(item,index) in tab_list" :key="index" @click="changeTab(index)" :class="{'active':item.isActive}">{{item.title}}</text>
			
		</view>
		<template v-if="!listData.length">
			<view class="noData">
				<view class="noDataImg">
					<image src="../../static/img/nkc.png" mode="" style="width: 298rpx;height: 339rpx;"></image>
				</view>
				<view class="noDataTitle">
					<view>暂无课程</view>
					<view>赶紧去挑选课程吧</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="product_box" v-for="(item,index) in listData" :key="index" @click="goDetail(item)">
				<image :src="imageUrl+item.shopCover" style="width: 196rpx;height: 161rpx;" mode=""></image>
				<view class="product_rt">
					<view >
						<text>{{item.shopTitle}}</text>
					</view>
					<view >
						<text>{{item.shopOriginalPrice}}</text>
					</view>
					<view >
						<text>秒杀价格</text>
						<text>￥{{item.orderPrice}}</text>
					</view>
					<view >
						<text>订单状态:</text>
						<text>{{getStatus(item.orderStatus)}}</text>
					</view>
					<!-- getStatus -->
				</view>
			</view>
			<view >
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
		</template>
		
	</view>
</template>

<script>
	import tab from "../component/topTab.vue"
	import myMixin from "../../static/js/mixin.js"
	export default{
		data(){
			return {
				tab_list:[{
					title:'限时秒杀',
					isActive:true
				},{
					title:'一元速砍',
					isActive:false
				},{
					title:'全城团',
					isActive:false
				},{
					title:'普通购买区',
					isActive:false
				},{
					title:'课程代金券',
					isActive:false
				}],
				index:0,
				imageUrl:"",
				statusArr:[{
					val:0,
					title:"待支付"
				},{
					val:1,
					title:"已支付"
				},{
					val:2,
					title:"已支付待成团、砍价中"
				},{
					val:3,
					title:"已成团待评论"
				},{
					val:4,
					title:"已评论"
				},{
					val:5,
					title:"订单已取消"
				}]
				
			}
		},
		computed:{
			getStatus(val){
				return function(val){
					let obj=this.statusArr.filter((a)=>{
						return a.val==val;
					})[0]
					return obj.title;
				}
			}
		},
		onLoad(data){
			this.index=data.num;
			this.changeTab(this.index)
		},
		components:{
			tab
		},
		mixins: [myMixin],
		methods:{
			//获取列表
			initData(){
				this.$http.get('/api/user/userOrders',{
					areaCode:this.cityCode,
					pageRow:this.pageRow,
					pageSize:this.pageSize,
					type:this.index
				}).then((data)=>{
					if(data.data.code==200){
						if(this.pageRow!=1){
							this.listData=this.listData.concat(data.data.result.records);
						}else{
							this.listData=data.data.result.records;
						}
					
						this.imageUrl=data.data.imageUrl;
						if (data.data.result.records.length) {
							if (data.data.result.records.length < this.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.loadStatus = 'nomore';
								
							} else {
								this.isLoadMore = false;
								this.loadStatus = 'more';
							}
						} else {
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						}
					}else{
						this.isLoadMore = true
						this.loadStatus = 'nomore'
					}
				}).catch(()=>{
					this.isLoadMore = true
					this.loadStatus = 'nomore'
				})
			},
			//进入详情
			goDetail(item){
				uni.navigateTo({
					url: '../subjectSub/curriculum?id=' + item.shopId+'&isPay='+1
				});
			},
			changeTab(index){
				this.index=index;
				this.pageRow=1;
				this.tab_list.forEach((a,i)=>{
					a.isActive=false;
					if(index==i){
						a.isActive=true;
					}
				})
				this.initData();
			}
		}
		
	}
</script>
<style lang="scss" scoped>
	@import '@/static/css/snappedUp.scss'
</style>
